<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="theme" content="Chirpy v2.5.1">
		<meta name="generator" content="Jekyll v3.9.0" />
		<meta property="og:title" content="撰写新文章" />
		<meta name="author" content="jianxiaochong" />
		<meta property="og:locale" content="en_US" />
		<meta name="description" content="命名和路径" />
		<meta property="og:description" content="命名和路径" />
		<link rel="canonical" href="https://jianxiaochong.github.io/posts/write-a-new-post/"
		/>
		<meta property="og:url" content="https://jianxiaochong.github.io/posts/write-a-new-post/"
		/>
		<meta property="og:site_name" content="jianxiaochong" />
		<meta property="og:type" content="article" />
		<meta property="article:published_time" content="2020-08-08T14:10:00+08:00"
		/>
		<meta name="twitter:card" content="summary" />
		<meta property="twitter:title" content="撰写新文章" />
		<meta name="twitter:site" content="@jianxiaochong" />
		<meta name="twitter:creator" content="@jianxiaochong" />
		<meta name="google-site-verification" content="google_meta_tag_verification"
		/>
		<script type="application/ld+json">
			{
				"description": "命名和路径",
				"@type": "BlogPosting",
				"headline": "撰写新文章",
				"dateModified": "2020-08-08T14:10:00+08:00",
				"datePublished": "2020-08-08T14:10:00+08:00",
				"mainEntityOfPage": {
					"@type": "WebPage",
					"@id": "https://jianxiaochong.github.io/posts/write-a-new-post/"
				},
				"author": {
					"@type": "Person",
					"name": "jianxiaochong"
				},
				"url": "https://jianxiaochong.github.io/posts/write-a-new-post/",
				"@context": "https://schema.org"
			}
		</script>
		<title>
			撰写新文章 | jianxiaochong
		</title>
		<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico" type="image/x-icon">
		<link rel="icon" href="/assets/img/favicons/favicon.ico" type="image/x-icon">
		<link rel="apple-touch-icon" href="/assets/img/favicons/apple-icon.png">
		<link rel="apple-touch-icon" href="/assets/img/favicons/apple-icon-precomposed.png">
		<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/favicons/apple-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/favicons/apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/favicons/apple-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/favicons/apple-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/favicons/apple-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/favicons/apple-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/favicons/apple-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/favicons/apple-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-icon-180x180.png">
		<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favicons/android-icon-192x192.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favicons/favicon-96x96.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
		<link rel="manifest" href="/assets/img/favicons/manifest.json">
		<meta name='msapplication-config' content='/assets/img/favicons/browserconfig.xml'>
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/assets/img/favicons/ms-icon-144x144.png">
		<meta name="theme-color" content="#ffffff">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
		<link rel="dns-prefetch" href="https://fonts.gstatic.com">
		<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
		<link rel="dns-prefetch" href="https://www.google-analytics.com">
		<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
		<link rel="dns-prefetch" href="https://www.googletagmanager.com">
		<link rel="preconnect" href="cdn.jsdelivr.net">
		<link rel="dns-prefetch" href="cdn.jsdelivr.net">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
		integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
		integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous">
		<link rel="preload" as="style" href="/assets/css/post.css">
		<link rel="stylesheet" href="/assets/css/post.css">
		<link rel="preload" as="style" href="/assets/css/lib/bootstrap-toc.min.css">
		<link rel="stylesheet" href="/assets/css/lib/bootstrap-toc.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js">
		</script>
		<script async src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js">
		</script>
		<script async src="/assets/js/post.min.js">
		</script>
		<script src="https://polyfill.io/v3/polyfill.min.js?features=es6">
		</script>
		<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
		</script>
		<script defer src="/app.js">
		</script>
		<body data-spy="scroll" data-target="#toc">
			<div id="sidebar" class="d-flex flex-column">
				<div id="nav-wrapper">
					<div id="profile-wrapper" class="d-flex flex-column">
						<div id="avatar" class="d-flex justify-content-center">
							<a href="/" alt="avatar">
								<img src="/assets/img/sample/avatar.jpg" alt="avatar" onerror="this.style.display='none'">
							</a>
						</div>
						<div class="profile-text mt-3">
							<div class="site-title">
								<a href="/">
									jianxiaochong
								</a>
							</div>
							<div class="site-subtitle font-italic">
								简小虫 丨个人博客
							</div>
						</div>
					</div>
					<ul class="nav flex-column">
						<li class="nav-item d-flex justify-content-center ">
							<a href="/" class="nav-link d-flex justify-content-center align-items-center w-100">
								<i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded">
								</i>
								<span>
									HOME
								</span>
							</a>
							<li class="nav-item d-flex justify-content-center ">
								<a href="/tabs/categories/" class="nav-link d-flex justify-content-center align-items-center w-100">
									<i class="fa-fw fas fa-stream ml-xl-3 mr-xl-3 unloaded">
									</i>
									<span>
										CATEGORIES
									</span>
								</a>
								<li class="nav-item d-flex justify-content-center ">
									<a href="/tabs/tags/" class="nav-link d-flex justify-content-center align-items-center w-100">
										<i class="fa-fw fas fa-tags ml-xl-3 mr-xl-3 unloaded">
										</i>
										<span>
											TAGS
										</span>
									</a>
									<li class="nav-item d-flex justify-content-center ">
										<a href="/tabs/archives/" class="nav-link d-flex justify-content-center align-items-center w-100">
											<i class="fa-fw fas fa-archive ml-xl-3 mr-xl-3 unloaded">
											</i>
											<span>
												ARCHIVES
											</span>
										</a>
										<li class="nav-item d-flex justify-content-center ">
											<a href="/tabs/about/" class="nav-link d-flex justify-content-center align-items-center w-100">
												<i class="fa-fw fas fa-info ml-xl-3 mr-xl-3 unloaded">
												</i>
												<span>
													ABOUT
												</span>
											</a>
					</ul>
				</div>
				<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
					<span id="mode-toggle-wrapper">
						<i class="mode-toggle fas fa-sun" dark-mode-invisible>
						</i>
						<i class="mode-toggle fas fa-moon" light-mode-invisible>
						</i>
						<script type="text/javascript">
							class ModeToggle {
								static get MODE_KEY() {
									return "mode";
								}
								static get DARK_MODE() {
									return "dark";
								}
								static get LIGHT_MODE() {
									return "light";
								}
								constructor() {
									if (this.mode != null) {
										if (this.mode == ModeToggle.DARK_MODE) {
											if (!this.isSysDarkPrefer) {
												this.setDark();
											}
										} else {
											if (this.isSysDarkPrefer) {
												this.setLight();
											}
										}
									}
									var self = this;
									/* always follow the system prefers */
									this.sysDarkPrefers.addListener(function() {
										if (self.mode != null) {
											if (self.mode == ModeToggle.DARK_MODE) {
												if (!self.isSysDarkPrefer) {
													self.setDark();
												}
											} else {
												if (self.isSysDarkPrefer) {
													self.setLight();
												}
											}
											self.clearMode();
										}
									});
								}
								/* constructor() */
								setDark() {
									$('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
									sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
								}
								setLight() {
									$('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
									sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
								}
								clearMode() {
									$('html').removeAttr(ModeToggle.MODE_KEY);
									sessionStorage.removeItem(ModeToggle.MODE_KEY);
								}
								get sysDarkPrefers() {
									return window.matchMedia("(prefers-color-scheme: dark)");
								}
								get isSysDarkPrefer() {
									return this.sysDarkPrefers.matches;
								}
								get isDarkMode() {
									return this.mode == ModeToggle.DARK_MODE;
								}
								get isLightMode() {
									return this.mode == ModeToggle.LIGHT_MODE;
								}
								get hasMode() {
									return this.mode != null;
								}
								get mode() {
									return sessionStorage.getItem(ModeToggle.MODE_KEY);
								}
								flipMode() {
									if (this.hasMode) {
										if (this.isSysDarkPrefer) {
											if (this.isLightMode) {
												this.clearMode();
											} else {
												this.setLight();
											}
										} else {
											if (this.isDarkMode) {
												this.clearMode();
											} else {
												this.setDark();
											}
										}
									} else {
										if (this.isSysDarkPrefer) {
											this.setLight();
										} else {
											this.setDark();
										}
									}
								}
								/* flipMode() */
							}
							/* ModeToggle */
							let toggle = new ModeToggle();
							$(".mode-toggle").click(function() {
								toggle.flipMode();
							});
						</script>
					</span>
					<span class="icon-border">
					</span>
					<a href="https://github.com/jianxiaochong" aria-label="github" target="_blank"
					rel="noopener">
						<i class="fab fa-github-alt">
						</i>
					</a>
					<a href="https://twitter.com/jianxiaochong" aria-label="twitter" target="_blank"
					rel="noopener">
						<i class="fab fa-twitter">
						</i>
					</a>
					<a href=" javascript:location.href = 'mailto:' + ['814105368','qq.com'].join('@')"
					aria-label="email">
						<i class="fas fa-envelope">
						</i>
					</a>
					<a href="/feed.xml" aria-label="rss">
						<i class="fas fa-rss">
						</i>
					</a>
				</div>
			</div>
			<div id="topbar-wrapper" class="row justify-content-center topbar-down">
				<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
					<span id="breadcrumb">
						<span>
							<a href="/">
								Posts
							</a>
						</span>
						<span>
							撰写新文章
						</span>
					</span>
					<i id="sidebar-trigger" class="fas fa-bars fa-fw">
					</i>
					<div id="topbar-title">
						Post
					</div>
					<i id="search-trigger" class="fas fa-search fa-fw">
					</i>
					<span id="search-wrapper" class="align-items-center">
						<i class="fas fa-search fa-fw">
						</i>
						<input class="form-control" id="search-input" type="search" aria-label="search"
						placeholder="Search...">
						<i class="fa fa-times-circle fa-fw" id="search-cleaner">
						</i>
					</span>
					<span id="search-cancel">
						Cancel
					</span>
				</div>
			</div>
			<div id="main-wrapper">
				<div id="main">
					<div class="row">
						<div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
							<div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
								<h1 data-toc-skip>
									撰写新文章
								</h1>
								<div class="post-meta text-muted d-flex flex-column">
									<div>
										Posted
										<span class="timeago " data-toggle="tooltip" data-placement="bottom" title="Sat, Aug 8, 2020, 2:10 PM +0800">
											Aug 8
											<i class="unloaded">
												2020-08-08T14:10:00+08:00
											</i>
										</span>
										by
										<span class="author">
											jianxiaochong
										</span>
									</div>
								</div>
								<div class="post-content">
									<h2 id="命名和路径">
										命名和路径
									</h2>
									<p>
										创建一个名为
										<code class="language-plaintext highlighter-rouge">
											YYYY-MM-DD的新文件-标题.扩展名
										</code>
										并将其放在根目录的“_post/”中。请注意，“EXTENSION”必须是“md”和“markdown”之一。从“v2.4.1”开始，您可以在“_post/”下创建子目录来对文章进行分类。
									</p>
									<h2 id="前题">
										前题
									</h2>
									<p>
										基本上，你需要填充，如下图所示：
										<a href="https://jekyllrb.com/docs/front-matter/">
											正面内容
										</a>
									</p>
									<div class="language-yaml highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4 5 6
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="nn">
																			---
																		</span>
																		<span class="na">
																			title
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="s">
																			TITLE
																		</span>
																		<span class="c1">
																			#标题
																		</span>
																		<span class="na">
																			date
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="s">
																			YYYY-MM-DD HH:MM:SS +/-TTTT
																		</span>
																		<span class="c1">
																			#时间
																		</span>
																		<span class="na">
																			categories
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="pi">
																			[
																		</span>
																		<span class="nv">
																			TOP_CATEGORIE
																		</span>
																		<span class="pi">
																			,
																		</span>
																		<span class="nv">
																			SUB_CATEGORIE
																		</span>
																		<span class="pi">
																			]
																		</span>
																		<span class="c1">
																			#顶级类别，次级类别
																		</span>
																		<span class="na">
																			tags
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="pi">
																			[
																		</span>
																		<span class="nv">
																			TAG
																		</span>
																		<span class="pi">
																			]
																		</span>
																		<span class="c1">
																			#标记名应始终为小写
																		</span>
																		<span class="nn">
																			---
																		</span>
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<blockquote>
										<p>
											<strong>
												注
											</strong>
											：posts的
											<strong>
												<em>
													layout
												</em>
											</strong>
											默认设置为
											<code class="language-plaintext highlighter-rouge">
												post
											</code>
											，因此不需要在Front Matter block中添加变量
											<strong>
												<em>
													layout
												</em>
											</strong>
											。
										</p>
									</blockquote>
									<h3 id="date--日期时区">
										date 日期时区
									</h3>
									<p>
										为了准确记录帖子的发布日期，您不应该只设置
										<code class="language-plaintext highlighter-rouge">
											_配置yml
										</code>
										但也要在前面的“date”字段中提供邮政的时区。格式：
										<code class="language-plaintext highlighter-rouge">
											+/-TTTT
										</code>
										，例如
										<code class="language-plaintext highlighter-rouge">
											+0800
										</code>
										。
									</p>
									<h3 id="categories-and-tags-类别和标记">
										Categories and Tags 类别和标记
									</h3>
									<p>
										每个帖子的“categories”设计为最多包含两个元素，“tags”中的元素数量可以是零到无穷大。
									</p>
									<p>
										属于同一
										<em>
											类别
										</em>
										/
										<em>
											标签
										</em>
										的帖子列表记录在单独的页面上。同时，这些
										<em>
											category
										</em>
										/
										<em>
											tag
										</em>
										type页面的数量等于所有帖子的“categories
										<code class="language-plaintext highlighter-rouge">
											/
										</code>
										tags”元素的数量，这意味着这两个数字必须完全相同。
									</p>
									<p>
										例如，假设有一个帖子前面有一个内容：
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2
																</pre>
																<td class="rouge-code">
																	<pre>
																		类别：【动物、昆虫】 标签：蜜蜂
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										那么我们应该在根目录的“categories”文件夹中放置两个
										<em>
											category
										</em>
										类型的页面，并在根目录的“tags”文件夹中放置一个
										<em>
											tag
										</em>
										type页面：
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4 5 6 7
																</pre>
																<td class="rouge-code">
																	<pre>
																		. ├── categories │ ├── animal.html # 类别类型页 │ └── insect.html ├── tags
																		│ └── bee.html # 标记类型页 ...
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										而
										<em>
											category
										</em>
										type页面的内容是
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4 5
																</pre>
																<td class="rouge-code">
																	<pre>
																		--- layout: category title: CATEGORY_NAME # 例如昆虫 category: CATEGORY_NAME
																		# 例如昆虫 ---
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										<em>
											tag
										</em>
										type页面的内容是
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4 5
																</pre>
																<td class="rouge-code">
																	<pre>
																		--- layout: tag title: TAG_NAME # 例如蜜蜂 tag: TAG_NAME # 例如蜜蜂 ---
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										随着帖子数量的增加，类别和标签的数量将增加数倍！如果我们仍然手动创建这些
										<em>
											category
										</em>
										/
										<em>
											tag
										</em>
										类型的文件，这显然是一项非常耗时的工作，而且很可能会错过其中的一些文件，例如，当您从帖子或其他地方单击丢失的“category”或“tag”链接时，浏览器会向您投诉“404找不到”。好消息是我们有了一个可爱的脚本工具``u
										scripts/sh/create_页码.sh
										<code class="language-plaintext highlighter-rouge">
											完成无聊的任务。基本上我们会通过
										</code>
										运行.sh
										<code class="language-plaintext highlighter-rouge">
											,
										</code>
										建筑.sh
										<code class="language-plaintext highlighter-rouge">
											,
										</code>
										部署.sh
										<code class="language-plaintext highlighter-rouge">
											或者
										</code>
										发布.sh`放在“tools/”中而不是单独运行它。查看它的用例[这里]（）。
									</p>
									<h2 id="上次修改日期">
										上次修改日期
									</h2>
									<p>
										根据帖子的最新git提交日期获取帖子的最后修改日期，所有帖子的修改日期设计为存储在``u data文件中/更新.yml`. 则该文件的内容可能如下：
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4 5
																</pre>
																<td class="rouge-code">
																	<pre>
																		- filename: getting-started # 没有日期和扩展名的post文件名 lastmod: 2020-04-13 00:38:56
																		+0800 # 上次修改日期 - ...
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										您可以选择手动创建此文件，但更好的方法是让它由脚本工具自动生成，并使用``u scripts/sh/dump_上一个mod.sh
										<code class="language-plaintext highlighter-rouge">
											生下来就是为了这个！类似于其他脚本（
										</code>
										create_页码.sh`)上面提到过，它也是从其他高级工具调用的，所以不必单独使用。
									</p>
									<p>
										当某些帖子自发布日期起被修改，并且文件``u数据/更新.yml`如果创建正确，则桌面视图的右侧面板中将显示一个标签为
										<strong>
											最近更新
										</strong>
										的列表，其中记录了最近修改的五篇文章。
									</p>
									<h2 id="目录">
										目录
									</h2>
									<p>
										默认情况下，
										<strong>
											T
										</strong>
										table
										<strong>
											o
										</strong>
										f
										<strong>
											C
										</strong>
										contents（TOC）显示在公告的右侧面板上。如果要全局关闭，请转到
										<code class="language-plaintext highlighter-rouge">
											_配置yml
										</code>
										并将变量“toc”的值设置为“false”。如果要关闭特定帖子的TOC，请将以下内容添加到post的
										<a href="https://jekyllrb.com/docs/front-matter/">
											Front Matter
										</a>
										:
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		--- toc: false ---
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="评论">
										评论
									</h2>
									<p>
										与TOC类似，研究(https://discus.com/)默认情况下，在每个post中加载comments，全局开关由file中的变量“comments”定义
										<code class="language-plaintext highlighter-rouge">
											_配置yml
										</code>
										. 如果要关闭特定帖子的评论，请将以下内容添加到帖子的
										<strong>
											首页
										</strong>
										中：
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		--- comments: false ---
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="数学">
										数学
									</h2>
									<p>
										出于网站性能的原因，默认情况下不会加载数学特性。但它可以通过以下方式实现：
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		--- math: true ---
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="预览图像">
										预览图像
									</h2>
									<p>
										如果要将图像添加到文章内容的顶部，请通过以下方式指定图像的url：
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		--- image: /path/to/image-file ---
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="固定柱">
										固定柱
									</h2>
									<p>
										您可以将一个或多个帖子固定在主页的顶部，固定的帖子将根据发布日期按相反的顺序排序。启用方式：
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		--- pin: true ---
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="代码块">
										代码块
									</h2>
									<p>
										Markdown symbols&lt;code class=“highlighter rouge”&gt;```&lt;/code&gt;可以轻松地创建代码块，如下例所示。
									</p>
									<div class="language-plaintext highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1
																</pre>
																<td class="rouge-code">
																	<pre>
																		这是一个常见的代码片段，没有语法突出显示和行号.
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="specific-language">
										Specific Language
									</h2>
									<p>
										Using
										<code class="highlighter-rouge">
											```language
										</code>
										you will get code snippets with line Numbers and syntax highlight.
									</p>
									<blockquote>
										<p>
											<strong>
												Note
											</strong>
											: The Jekyll style
											<code class="language-plaintext highlighter-rouge">
												{% highlight LANGUAGE %}
											</code>
											or
											<code class="language-plaintext highlighter-rouge">
												{% highlight LANGUAGE linenos %}
											</code>
											are not allowed to be used in this theme !
										</p>
									</blockquote>
									<div class="language-yaml highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4 5 6
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="c1">
																			# Yaml code snippet
																		</span>
																		<span class="na">
																			items
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="pi">
																			-
																		</span>
																		<span class="na">
																			part_no
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="s">
																			A4786
																		</span>
																		<span class="na">
																			descrip
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="s">
																			Water Bucket (Filled)
																		</span>
																		<span class="na">
																			price
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="m">
																			1.47
																		</span>
																		<span class="na">
																			quantity
																		</span>
																		<span class="pi">
																			:
																		</span>
																		<span class="m">
																			4
																		</span>
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h4 id="liquid-codes">
										Liquid Codes
									</h4>
									<p>
										If you want to display the
										<strong>
											Liquid
										</strong>
										snippet, surround the liquid code with
										<code class="language-plaintext highlighter-rouge">
											{% raw %}
										</code>
										and
										<code class="language-plaintext highlighter-rouge">
											{% endraw %}
										</code>
										.
									</p>
									<div class="language-liquid highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="p">
																			{%
																		</span>
																		<span class="w">
																		</span>
																		<span class="kr">
																			if
																		</span>
																		<span class="w">
																		</span>
																		<span class="nv">
																			product
																		</span>
																		<span class="p">
																			.
																		</span>
																		<span class="nv">
																			title
																		</span>
																		<span class="w">
																		</span>
																		<span class="ow">
																			contains
																		</span>
																		<span class="w">
																		</span>
																		<span class="s1">
																			'Pack'
																		</span>
																		<span class="w">
																		</span>
																		<span class="p">
																			%}
																		</span>
																		This product's title contains the word Pack.
																		<span class="p">
																			{%
																		</span>
																		<span class="w">
																		</span>
																		<span class="kr">
																			endif
																		</span>
																		<span class="w">
																		</span>
																		<span class="p">
																			%}
																		</span>
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="learn-more">
										Learn More
									</h2>
									<p>
										For more knowledge about Jekyll posts, visit the
										<a href="https://jekyllrb.com/docs/posts/">
											Jekyll Docs: Posts
										</a>
										.
									</p>
								</div>
								<div class="post-tail-wrapper text-muted">
									<div class="post-meta mb-3">
										<i class="far fa-folder-open fa-fw mr-1">
										</i>
										<a href='/categories/blogging/'>
											Blogging
										</a>
										,
										<a href='/categories/tutorial/'>
											Tutorial
										</a>
									</div>
									<div class="post-tags">
										<i class="fa fa-tags fa-fw mr-1">
										</i>
										<a href="/tags/writing/" class="post-tag no-text-decoration">
											writing
										</a>
									</div>
									<div class="post-tail-bottom d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
										<div class="license-wrapper">
											This post is licensed under
											<a href="https://creativecommons.org/licenses/by/4.0/">
												CC BY 4.0
											</a>
											by the author.
										</div>
										<div class="share-wrapper">
											<span class="share-label text-muted mr-1">
												Share
											</span>
											<span class="share-icons">
												<a href="https://twitter.com/intent/tweet?text=撰写新文章 - jianxiaochong&url=https://jianxiaochong.github.io/posts/write-a-new-post/"
												data-toggle="tooltip" data-placement="top" title="Twitter" target="_blank"
												rel="noopener" aria-label="Twitter">
													<i class="fa-fw fab fa-twitter">
													</i>
												</a>
												<a href="https://www.facebook.com/sharer/sharer.php?title=撰写新文章 - jianxiaochong&u=https://jianxiaochong.github.io/posts/write-a-new-post/"
												data-toggle="tooltip" data-placement="top" title="Facebook" target="_blank"
												rel="noopener" aria-label="Facebook">
													<i class="fa-fw fab fa-facebook-square">
													</i>
												</a>
												<a href="https://telegram.me/share?text=撰写新文章 - jianxiaochong&url=https://jianxiaochong.github.io/posts/write-a-new-post/"
												data-toggle="tooltip" data-placement="top" title="Telegram" target="_blank"
												rel="noopener" aria-label="Telegram">
													<i class="fa-fw fab fa-telegram">
													</i>
												</a>
												<i class="fa-fw fas fa-link small" onclick="copyLink()" data-toggle="tooltip"
												data-placement="top" title="Copy link">
												</i>
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
							<div class="access">
								<div id="access-tags">
									<span>
										Trending Tags
									</span>
									<div class="d-flex flex-wrap mt-3 mb-1 mr-3">
										<a class="post-tag" href="/tags/favicon/">
											favicon
										</a>
										<a class="post-tag" href="/tags/getting-started/">
											getting started
										</a>
										<a class="post-tag" href="/tags/typography/">
											typography
										</a>
										<a class="post-tag" href="/tags/writing/">
											writing
										</a>
									</div>
								</div>
							</div>
							<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
								<span class="pl-3 pt-2 mb-2">
									Contents
								</span>
								<nav id="toc" data-toggle="toc">
								</nav>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-12 col-lg-11 col-xl-8">
							<div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
								<div id="related-posts" class="mt-5 mb-2 mb-sm-4">
									<h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>
										Further Reading
									</h3>
									<div class="card-deck mb-4">
										<div class="card">
											<a href="/posts/getting-started/">
												<div class="card-body">
													<span class="timeago small">
														Aug 9, 2019
														<i class="unloaded">
															2019-08-09T20:55:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														Getting Started
													</h3>
													<div class="text-muted small">
														<p>
															Installation Fork Chirpy on GitHub, rename the repository to USERNAME.github.io
															(where USERNAME is your GitHub username), and then open terminal and clone
															the fork to local by: $ git clone https:...
														</p>
													</div>
												</div>
											</a>
										</div>
										<div class="card">
											<a href="/posts/customize-the-favicon/">
												<div class="card-body">
													<span class="timeago small">
														Aug 11, 2019
														<i class="unloaded">
															2019-08-11T00:34:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														Customize the Favicon
													</h3>
													<div class="text-muted small">
														<p>
															In Chirpy, the image files of Favicons are placed in assets/img/favicons/.
															You may need to replace them with your own. So let’s see how to customize
															these Favicons. With a square image (PNG, JPG o...
														</p>
													</div>
												</div>
											</a>
										</div>
										<div class="card">
											<a href="/posts/text-and-typography/">
												<div class="card-body">
													<span class="timeago small">
														Aug 8
														<i class="unloaded">
															2020-08-08T11:33:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														Markdown文本和排版
													</h3>
													<div class="text-muted small">
														<p>
															这个Jekyll模板完全兼容Markdown语法。现在，让我们看看文本和排版。 标题 H1 H2 H3 H4 段落 我似浮云独自游 悠然溪谷群山中，
															霎时美景入bai眼帘， 金色水仙朵朵开， 遍布湖畔树bai荫下， 摇曳风中舞翩翩， 璀璨漫漫如繁星。 列表 ###有序列表 1.第一项 2.第二项
															3.第三项 无序列表 item 1 ...
														</p>
													</div>
												</div>
											</a>
										</div>
									</div>
								</div>
								<div class="post-navigation d-flex justify-content-between">
									<a href="/posts/text-and-typography/" class="btn btn-outline-primary">
										<p>
											Markdown文本和排版
										</p>
									</a>
									<span class="btn btn-outline-primary disabled">
										<p>
											-
										</p>
									</span>
								</div>
							</div>
						</div>
					</div>
					<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js">
					</script>
					<script type="text/javascript">
						const imgs = document.querySelectorAll('#post-wrapper img');
						const observer = lozad(imgs);
						observer.observe();
					</script>
					<footer class="d-flex w-100 justify-content-center">
						<div class="d-flex justify-content-between align-items-center">
							<div class="footer-left">
								<p class="mb-0">
									© 2020
									<a href="https://twitter.com/jianxiaochong">
										jianxiaochong
									</a>
									.
									<span data-toggle="tooltip" data-placement="top" title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">
										Some rights reserved.
									</span>
								</p>
							</div>
							<div class="footer-right">
								<p class="mb-0">
									Powered by
									<a href="https://jekyllrb.com" target="_blank" rel="noopener">
										Jekyll
									</a>
									with
									<a href="https://github.com/cotes2020/jekyll-theme-chirpy/" target="_blank"
									rel="noopener">
										Chirpy
									</a>
									theme.
								</p>
							</div>
						</div>
					</footer>
				</div>
				<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
					<div class="col-12 col-xl-11 post-content">
						<div id="search-hints">
							<h4 class="text-muted mb-4">
								Trending Tags
							</h4>
							<a class="post-tag" href="/tags/favicon/">
								favicon
							</a>
							<a class="post-tag" href="/tags/getting-started/">
								getting started
							</a>
							<a class="post-tag" href="/tags/typography/">
								typography
							</a>
							<a class="post-tag" href="/tags/writing/">
								writing
							</a>
						</div>
						<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3">
						</div>
					</div>
				</div>
			</div>
			<div id="mask">
			</div>
			<a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow"
			role="button">
				<i class="fas fa-angle-up">
				</i>
			</a>
			<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js">
			</script>
			<script>
				SimpleJekyllSearch({
					searchInput: document.getElementById('search-input'),
					resultsContainer: document.getElementById('search-results'),
					json: '/assets/js/data/search.json',
					searchResultTemplate: '<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0"> <a href="https://jianxiaochong.github.io{url}">{title}</a><div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"><div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div><div><i class="fa fa-tag fa-fw"></i>{tags}</div></div><p>{snippet}</p></div>',
					noResultsText: '<p class="mt-5">Oops! No result founds.</p>'
				});
			</script>
			<script async src="https://www.googletagmanager.com/gtag/js?id=">
			</script>
			<script>
				window.dataLayer = window.dataLayer || [];
				function gtag() {
					dataLayer.push(arguments);
				}
				gtag('js', new Date());
				gtag('config', '');
			</script>